<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算属性,方法和侦听器</title>
	<script src="vue.js"></script>
</head>
<body>
	
	<div id="root">
		{{fullName}}
		{{age}}
	</div>
	

	<script>
		// 通过3种方式, 1.计算属性 2.方法 3.侦听器修改fullname 
		// 侦听器是监听data中属性的变化的.
		// 当上述3种方法都可以解决问题的时候, 有限推荐 计算属性 computed
		var vm = new Vue({
			el: '#root',
			data: {
				firstName: 'Dell',
				lastName: 'Lee',
				age: 28,
				fullName: 'Dell Lee'
			},

			//3. 侦听器
			watch: {
				firstName: function(){
					console.log('计算了一次');
					this.fullName = this.firstName + ' ' + this.lastName
				},
				lastName: function(){
					console.log('计算了一次');
					this.fullName = this.firstName + ' ' + this.lastName
				}
			}


			//2. 用方法的形式也可以调用 fullName, 但是没有缓存, 没有计算属性好. 调用的时候, 需要用 {{fullName()}}
			// methods: {
			// 	fullName: function(){
			// 		console.log('计算了一次');
			// 		return this.firstName + ' ' + this.lastName;
			// 	}
			// }



			//1. 计算属性, 内置缓存, 关联的值没变化, 直接使用上一次结果, 如果改变则重新计算
			// computed: {
			// 	fullName: function(){
			// 		console.log('计算了一次')
			// 		return this.firstName + ' ' + this.lastName
			// 	}
			// }
		})
	</script>

</body>
</html>